<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// 1、创建一个ref，跟dom节点进行关联
const inputRef = ref<HTMLInputElement | null>()

onMounted(() => {
  // 聚焦
  inputRef.value?.focus()
  // 通过操作dom的方式，给input赋值
  //   console.log(inputRef.value)

  // 非空断言，比较暴力，一般是非常确定的情况下，才使用
  inputRef.value!.value = 'zhangsan'

  // 下面这种方式比较温和
  //   if (inputRef.value) {
  //     inputRef.value.value = '李四'
  //   }
})
</script>

<template>
  <div class="">
    <input type="text" ref="inputRef" />
  </div>
</template>

<style scoped></style>
